<template>
  <div class="regBox" ref="regBox">
    <div class="chacha el-icon-circle-close" @click="xiaoshi"></div>
    <div class="register">
      <div class="touxiangBox">
        <span>头像:</span>
        <div class="picbox" ref="picbox">
          <input
            @change="changetouxiang"
            type="file"
            id="touxiang"
            ref="touxiang"
            required="required"
          />
        </div>
      </div>

      <div class="username">
        <span>用户名:</span>
        <input
          type="text"
          id="user_name"
          ref="user_name"
          placeholder="请输入用户名"
          required="required"
          class="input1"
          v-model="username"
        />
      </div>

      <div class="phoneBox">
        邮箱
        <input
          type="text"
          id="phone"
          class="input1"
          required="required"
          ref="phone"
          placeholder="请输入邮箱"
          v-model="email"
        />
        <div class="phone_font font1" ref="phone_font">不是邮箱,请重填</div>
      </div>

      <div class="pwdBox">
        <span>密码:</span>
        <input
          type="password"
          id="pwd"
          ref="pwd"
          class="input1"
          required="required"
          placeholder="请输入密码"
          v-model="pwd"
        />
        <div class="pwd_font font" ref="pwd_font">
          密码由8-30位必须包含字母、数字组成
        </div>
      </div>
      <div class="vfBox">
        <span>验证码:</span>
        <input
          type=""
          name=""
          id="verify"
          ref="verify"
          required="required"
          value=""
          v-model="verify"
        /><span id="verifybox" ref="verifybox" @click="verifyFn"></span>
        <div class="ver_font font1" ref="ver_font">验证码错误</div>
      </div>
      <div class="reg_btn">
        <!-- <div to="" class="registerBtn" @click="clickRegFn">注册</div> -->
        <button class="registerBtn" @click="clickRegFn">注册</button>
        <button type="button" class="cancelBtn">取消</button>
      </div>
      <!-- 弹窗 -->
      <div class="reg_model model2" ref="model2">
        <div class="model_font">你已经注册，直接登录</div>
        <router-link to="/login" class="queren queren2" ref="queren2"
          >确认</router-link
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: "",
      // touxiang: "",
      verify: "",
      pwd: "",
      username: "",
    };
  },
  methods: {
    xiaoshi() {
      this.$refs.regBox.style.display = "none";
      this.$parent.register1 = "false";
    },
    // 图片预览
    changetouxiang() {
      var touxiang = this.$refs.touxiang;
      var f1 = touxiang.files;
      console.log(f1);
      var picbox = this.$refs.picbox;
      console.log(picbox);
      picbox.style.backgroundImage = `url(${window.URL.createObjectURL(
        f1[0]
      )})`;
      picbox.style.backgroundSize = "100% 100%";
    },
    // 获取验证码
    verifyFn() {
      // 向后端请求验证码
      var url = "/dzf/verify";
      this.$axios(url).then((res) => {
        // console.log(res.data);
        verifybox.innerHTML = res.data;
      });
    },
    // 点击注册
    clickRegFn() {
      this.setReghister();
    },
    async setReghister() {
      // var tel = 0;
      // 前端验证  手机号码

      // 密码认证
      var pwd = 0;
      var pwd = this.$refs.pwd;
      var pwdRegex = new RegExp("(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}");
      if (!pwdRegex.test(pwd.value)) {
        var pwd_font = this.$refs.pwd_font;
        pwd_font.style.color = "red";
        pwd = 0;
      } else {
        var pwd_font = this.$refs.pwd_font;
        pwd_font.style.color = "#ccc";
        pwd = 1;
      }
      // if (tel == 1 && pwd == 1) {
      if (pwd == 1) {
        var touxiang = this.$refs.touxiang;
        var formdata = new FormData();
        formdata.append("verify", this.verify);
        formdata.append("user_name", this.username);
        formdata.append("email", this.email);
        formdata.append("pwd", this.pwd);
        formdata.append("touxiang", touxiang.files[0]);
        console.log(formdata, 1111);
        // 向后端请求数据
        var url = "/dzf/register";
        var resdata = await this.$axios.post(url, formdata);
        console.log(resdata, 15555555551);
        if (resdata.data.code == 4001) {
          // 验证码错误
          var ver_font = this.$refs.ver_font;
          ver_font.style.display = "block"; //弹出验证码错误
          var verify = this.$refs.verify;
          verify.onclick = function () {
            // var ver_font = this.$refs.ver_font;
            ver_font.style.display = "none";
          };
        } else if (resdata.data.code == 4002) {
          // 该用户已注册 先设置一个模态弹窗 点击确认后直接入登录页面
          console.log("已注册");
          var model2 = this.$refs.model2;
          model2.style.display = "block";
        } else {
          //注册成功
          //1.帮助用户登录然后跳转
          //2.跳转到登录页面
          this.$router.push("/login");
        }
      }
    },
  },
  mounted() {
    this.verifyFn();
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.regBox {
  width: 1350px;
  height: 650px;
  background-color: rgba(10, 10, 10, 0.4);
  position: fixed;
  /* display: flex;
  justify-content: center;
  align-items: center; */
}
.chacha {
  font-size: 50px;
  color: lightgray;
  position: absolute;
  right: 2px;
  top: 0;
}
.register {
  width: 400px;
  height: 300px;
  /* background-color: rgba(10, 10, 10, 0.1);
   */
  background-color: #fff;
  /* margin: 0 auto; */
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.register .input1 {
  width: 250px;
  height: 35px;
  margin-top: 3px;
  outline: none;
  border: 1px solid #ccc;
}

/* 头像 */

.touxiangBox {
  display: flex;
  padding-top: 10px;
  height: 50px;
  margin: 0 auto;
  vertical-align: middle;
}

.touxiangBox span {
  margin-left: 66px;
  margin-top: 20px;
}

.picbox {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  margin: 0 auto;
}

#touxiang {
  width: 50px;
  height: 50px;
  opacity: 0;
}

.username span {
  margin-left: 16px;
  margin-top: 20px;
}

.pwdBox span {
  margin-left: 30px;
  margin-top: 20px;
}

.phoneBox {
  position: relative;
  margin-left: 30px;
}

.font1 {
  display: none;
  font-size: 12px;
  color: red;
  position: absolute;
  left: 200px;
  top: 12px;
}

.vfBox {
  position: relative;
}

.font {
  color: slategrey;
  font-size: 12px;
}

.vfBox span {
  margin-left: 55px;
  margin-top: 20px;
}

/* 验证码 */

.vfBox {
  margin-top: 5px;
  display: flex;
}

#verify {
  width: 120px;
  height: 35px;
  outline: none;
  border: 1px solid #ccc;
}

#verifybox {
  margin-left: 30px;
  margin-top: -1px;
  height: 40px;
  background-color: rgba(10, 10, 10, 0.1);
  /* border: 1px solid red; */
}

/* 注册 */

.reg_btn {
  width: 200px;
  height: 35px;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
}

.registerBtn {
  width: 70px;
  height: 35px;
  font-size: 18px;
}

.cancelBtn {
  width: 70px;
  height: 35px;
  font-size: 18px;
}

/* 模态弹窗 */

.reg_model {
  width: 300px;
  height: 80px;
  background-color: #fff;
  text-align: center;
  position: absolute;
  top: -175px;
  left: 55px;
  border-radius: 10px;
  display: none;
  /* border: 1px solid red; */
}

.reg_model .model_font {
  font-size: 16px;
  margin-top: 20px;
}

.queren {
  width: 70px;
  height: 50ox;
  text-align: center;
  font-size: 18px;
  background-color: #ccc;
  position: absolute;
  border-radius: 5px;
  right: 5px;
  bottom: 5px;
}
</style>
